<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
	<style>
		* {
			margin:0;
			padding: 0;
		}
		html,body {
			height: 100%;
		}
		header {
			height: 50px;
			background-color: skyblue;
		}
		#main {
			height: calc(100% - 50px);
			overflow: hidden;
		}
		iframe {
			outline: none;
			border:none;
			width: 100%;
			height: 100%;
		}
		ul {
			list-style: none;
		}
		ul>li {
			float: left;
			height: 50px;
			width: 150px;
			line-height: 50px;
			text-align: center;
			cursor: pointer;
		}
		ul>li:hover,ul>li.active {
			background-color: blue;
		}
		a {
			display: inline-block;
			width: 100%;
			height: 100%;
			text-decoration: none;
			color:#fff;
		}
		.hide {
			display: none;
		}
	</style>
</head>
<body>
<header>
	<ul>
		<li class="active"><a href="#home">home</a></li>
		<li><a href="#page1">page1</a></li>
		<li><a href="#page2">page2</a></li>
		<li><a href="#page3">page3</a></li>
	</ul>
</header>
<main id="main">
</main>
</body>
<script src="../../js/jquery-2.2.2.min.js"></script>
<script src="../../js/router.js"></script>
<script>
	$("li").on('click',function(){
		$(this).addClass('active').siblings().removeClass('active');
	})
	var route = new Router({
		route:{
			home:'../home/home', // 必需配置的默认页
			page1:'../page/page1',
			page2:'../page/page2',
			page3:'../page/page3'
		}
	});
	// 刷新完成后回调
	route.afterReload = function(value){
		console.log(value);
		$('a[href="#'+ value +'"]').parent().addClass('active').siblings().removeClass('active');
	}
</script>
</html>